<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<%@taglib prefix="m" uri="http://taglibs.mobylet.org/" %>
<html>
<head>
<title>Twitter</title>
</head>

<body style="border: 2px solid black;">
<div style="background: none repeat scroll 0% 0% #87CEFA;">
	<br>
	<table border="0" cellpadding="0" cellspacing="0">
	<tbody>
	<tr>
		<td valign="top">
			<img src="${mapURI}">
		</td>
	</tr>
	</tbody>
	</table>
	<br>
	
	<form method="post" action="tweet" style="margin: 0pt; padding: 0pt;">
		<input name="latitude" value="${latitude}" type="hidden">
		<input name="longitude" value="${longitude}" type="hidden">
		<input name="mapzoom" value="${mapzoom}" type="hidden">
		<table border="0" cellpadding="0" cellspacing="0">
		<tbody>
		<tr>
			<td>
				<input name="message" istyle="1" format="*M" mode="hiragana" size="20" type="text">
			</td>
			<td>
				<input value="つぶやく" type="submit">
			</td>
		</tr>
		</tbody>
		</table>
		<br>
	</form>
</div>

<div>
	<table>
	<tbody>
	<tr>
		<td style="padding: 5px;">
			<c:url value="/twitter/show" var="url" >
				<c:param name="latitude" value="${latitude}"/>
				<c:param name="longitude" value="${longitude}"/>
				<c:param name="mapzoom" value="${mapzoom}"/>
			</c:url>
			0.<a href="${url}" accesskey="0">更新</a>
		</td>
		<td style="padding: 5px;">
			<c:url value="/twitter/timeline" var="url" >
				<c:param name="latitude" value="${latitude}"/>
				<c:param name="longitude" value="${longitude}"/>
				<c:param name="mapzoom" value="${mapzoom}"/>
			</c:url>
			1.<a href="${url}" accesskey="1">タイムライン</a>
		</td>
	</tr>
	<tr>
		<td style="padding: 5px;">
			<c:url value="/twitter/show" var="url" >
				<c:param name="latitude" value="${latitude}"/>
				<c:param name="longitude" value="${longitude}"/>
				<c:param name="mapzoom" value="${mapzoom+1}"/>
			</c:url>
			*.<a href="${url}" accesskey="*">拡大</a>
		</td>
		<td style="padding: 5px;">
			<c:url value="/twitter/show" var="url" >
				<c:param name="latitude" value="${latitude}"/>
				<c:param name="longitude" value="${longitude}"/>
				<c:param name="mapzoom" value="${mapzoom-1}"/>
			</c:url>
			#.<a href="${url}" accesskey="#">縮小</a>
		</td>
	</tr>
	</tbody>
	</table>

	<table style="background: none repeat scroll 0% 0% #A9A9A9; width: 100%;">
	<tbody>
	<c:forEach var="tweet" items="${tweets}" varStatus="status">
       <c:choose>
         <c:when test="${status.count % 2 == 0}">
           <c:set var="color" value="#FFFFFF;" />
         </c:when>
         <c:otherwise>
           <c:set var="color" value="#F5F5F5;" />
         </c:otherwise>
       </c:choose>
	<tr>
		<td style="background: none repeat scroll 0% 0% <c:out value="${color}"/> padding: 5px;">
			${status.count}<br />
			<c:choose>
			<c:when test="${tweet.class.name =='twitter4j.StatusJSONImpl'}">
				<img src="${tweet.user.profileImageURL}" width="40" height="40">
			</c:when>
			<c:otherwise>
				<img src="${tweet.profileImageUrl}" width="40" height="40">
			</c:otherwise>
			</c:choose>
		</td>
		<td style="background: none repeat scroll 0% 0% <c:out value="${color}"/> padding: 5px;">
			${f:h(tweet.text)}
		</td>
	</tr>
	</c:forEach>
	</tbody>
	</table>
</div>
<br>

</body>
</html>
